<template>
	<view>
		<view class="phone_text_input">
			<uni-easyinput v-model="phone" maxlength="11" type="number" :inputBorder="false" placeholder="请输入手机号" :styles="{'color':'#FFFFFF'}" />
		</view>
		<view class="phone_text_input_line"></view>
		<view class="code_text_input">
			<uni-easyinput v-model="code" maxlength="6" type="number" :inputBorder="false" placeholder="请输入验证码" :styles="{'color':'#FFFFFF'}">
				<template v-slot:right>
					<uni-send-sms-code :phone="phone" ref="sendSmsCode"></uni-send-sms-code>
				</template>
			</uni-easyinput>
		</view>
		<view class="code_text_input_line"></view>
		<view class="agreement_view">
			<text>未注册九萌助眠的手机号，登录时将自动注册，且代表您已同意以下协议：</text>
			<text class="agreement_user_view" @click="openUserProtocol()">用户协议</text>和<text class="agreement_yinsi_view" @click="openPrivateProtocol()">隐私协议</text>
		</view>
		<view class="submit_button_view" @click="submitButtonClick()">登录/同意协议并注册</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: "",
				code: ""
			};
		},
		methods: {
			openPrivateProtocol() {
				console.log("打开隐私协议");
				const url = this.$jmH5.getPrivateProtocl();
				uni.navigateTo({
					url:"../../jmWebview/jmWebview?jmurl="+url,
				})
			},
			openUserProtocol() {
				console.log("打开用户协议");
				const url = this.$jmH5.getUserProtocol();
				uni.navigateTo({
					url:"../../jmWebview/jmWebview?jmurl="+url,
				})
			},
			submitButtonClick() {
				var that = this;
				uni.showLoading({
					title:"数据加载中"
				});
				uniCloud.callFunction({
					name:"uni-id-cf",
					data:{
						action:'loginBySms',
						params:{
							"mobile": this.phone,
							"code": this.code
						},
					},
					success: ({result}) => {
						uni.hideLoading();
						console.log(result);
						if(result.code===0){
							uni.showToast({
								title: "登录成功",
								icon: 'none'
							});
							// 保存用户数据
							that.saveUserLoginInfomation(result);
							// 退出界面
							setTimeout(function(){
								uni.navigateBack();
							}, 1000);
						}else{
							uni.showToast({
								title:result.msg,
								icon:"none"
							});
						}
					}
				})
			},
			/* 保存用户数据，比如token */
			saveUserLoginInfomation(result) {
				this.$jmUserInfo.saveUserToken(result.token);
				this.$jmUserInfo.saveUserTokenExpired(result.tokenExpired);
				this.$jmUserInfo.saveUserMobile(result.mobile);
				this.$jmUserInfo.saveUserUid(result.uid);
			},
		
		
		
		}
	}
</script>

<style lang="scss">
	.phone_text_input {
		margin: 30rpx 30rpx 0 30rpx;
	}
	
	.phone_text_input_line {
		margin: 0 50rpx 0 50rpx;
		height: 1rpx;
		background-color: #696969;
	}
	
	.code_text_input {
		margin: 60rpx 30rpx 0 30rpx;
	}
	
	.code_text_input_line {
		margin: 0 50rpx 0 50rpx;
		height: 1rpx;
		background-color: #696969;
	}
	
	.agreement_view {
		margin: 30rpx 50rpx 0 50rpx;
		color: #696969;
		font-size: 26rpx;
	}
	
	.agreement_user_view {
		position: relative;
		color: #ff4040;
	}
	
	.agreement_yinsi_view {
		position: relative;
		color: #ff4040;
	}
	
	.submit_button_view {
		margin: 150rpx 50rpx 0 50rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		text-align: center;
		color: #FFFFFF;
		background-color: #ff4040;
		font-size: 30rpx;
	}

</style>
